<template>
	<div
		v-if="toy"
		class='exchange-detail'
	>
		<TopNav
			showBack
			showCollect
			:showTitle="false"
			backColor="#01937C"
			:navName="toy.name"
			color="#00493E"
			msgColor="#01937C"
		/>
		<div class="container">
			<div class="left">
				<img
					v-for="(img,i) in toy.imgs"
					:key="i"
					:src="img"
				>
				<div class="dots">
					<div
						class="dot"
						:class="i === activeImg ? 'active' : ''"
						v-for="(item,i) in 3"
						:key="item"
					/>
				</div>
			</div>
			<div class="right">
				<div class="name">{{toy.name}}</div>
				<div class="user">
					<img :src="toy.user.avatar">
					<div class="username">{{toy.user.name}}</div>
				</div>
				<div class="title">交换原因</div>
				<div class="reason">{{toy.reason}}</div>
				<div class="title">交换条件</div>
				<div class="condition">{{toy.condition}}</div>
				<!-- 按键 -->
				<div class="btns">
					<Button
						radius="100"
						width="200"
						height="50"
					>
						<div class="btn">
							去交换
							<Iconfont
								style="margin-left: 12px;"
								name="icon-arrow-right"
								size="18"
							/>
						</div>
					</Button>
					<Button
						style="margin-left: 20px;"
						radius="100"
						width="200"
						height="50"
						bgColor="#ffffff"
						color="#00C9A9"
						border="2px solid #00C9A9"
					>
						<div class="btn">
							<Iconfont
								style="margin-right: 8px;"
								name="icon-Group"
								size="18"
								color="#00C9A9"
							/>
							收藏
						</div>
					</Button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { getExchangeToy } from '@/api/toy'
export default {
  data() {
    return {
      id: null,
      toy: null,
      activeImg: 0,
    }
  },
  created() {
    this.id = +this.$route.query.id
    this.toy = getExchangeToy(this.id)
    console.log(this.toy)
  },
}
</script>

<style lang='scss' scoped>
.exchange-detail {
  padding-top: 78px;
  background-color: $bgColor1;

  .container {
    display: flex;
    align-items: flex-start;
    padding: 60px;
    background-color: #ffffff;
    border-radius: 30px 30px 0 0;

    .left {
      position: relative;
      flex: 1;

      img {
        width: 100%;
      }

      .dots {
        position: absolute;
        bottom: 13px;
        left: 50%;
        display: flex;
        transform: translateX(-50%);

        .dot {
          width: 10px;
          height: 10px;
          background-color: #ffffff;
          border-radius: 10px;

          &:not(:first-of-type) {
            margin-left: 10px;
          }

          &.active {
            background-color: $primary2;
          }
        }
      }
    }

    .right {
      flex: 1;
      padding: 60px 60px 40px;

      .name {
        font-size: $sLarger;
        color: $color2;
      }

      .user {
        display: flex;
        align-items: center;
        margin: 30px 0;

        .username {
          margin-left: 10px;
        }
      }

      .title {
        margin-bottom: 20px;
        color: rgba(0, 73, 62, 0.4);
      }

      .reason,
      .condition {
        margin-bottom: 35px;
        color: $color2;
      }

      .btns {
        display: flex;

        .btn {
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
}
</style>
